<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06个人简历</title>
</head>
<body>
    <table border="1px">
        <caption>个人简介</caption>
        <tr><td>照片:</td><td id="pic_td"></td></tr>
        <tr><td>姓名:</td><td id="name_td"></td></tr>
        <tr><td>年龄:</td><td id="age_td"></td></tr>
        <tr><td>好友:</td><td id="friend_td"></td></tr>
    </table>
    <script>
        //1.准备数据JS对象person
        let person = {
            name:'传奇哥',
            age:18,
            friends:["路飞","索隆","娜美","张飞"],
            imgUrl:"img/fcq.jpg"
        };
        //2.获取上面的4个单元格
        let picTd = document.getElementById("pic_td");
        let nameTd = document.getElementById("name_td");
        let ageTd = document.getElementById("age_td");
        let friendTd = document.getElementById("friend_td");
        //3.将person对象的name值与age值取出,存入对应的单元格中
        nameTd.innerHTML = person.name;
        ageTd.innerHTML = person.age;
        //4.1页面没有图片标签,需要创建
        let imgE = document.createElement('img');
        //4.2给创建好的图片元素设置图片路径与宽度
        imgE.src = person.imgUrl;
        imgE.width=100;
        //4.3将准备好的图片元素挂到对应的td下
        picTd.append(imgE);

        //5.1页面没有ul标签,需要创建
        let ul = document.createElement('ul');
        //5.2使用增强for循环遍历person对象的friends数组,获取每个朋友的名字
        for(let fName of person.friends){
            //5.3每遍历到一位朋友,就创建一个li元素
            let li = document.createElement("li");
            //5.4将遍历的朋友名写入li中
            li.innerHTML = fName;
            //5.5将准备好的li挂到ul下
            ul.append(li);
        }
        //6.将准备好的ul挂到对应的td下
        friendTd.append(ul);
    </script>
</body>
</html>